<template>
  <div>
    <el-result :icon="isSM4?'success':'info'">
      <template #extra>
        <el-radio-group v-model="dataType">
          <el-radio :label="1">仅加密</el-radio>
          <el-radio :label="2">仅签名</el-radio>
          <el-radio :label="3">加密及签名</el-radio>
        </el-radio-group>
        <br>
        <el-switch
          v-model="isSM4"
          class="mb-2"
          @change = "SM4StatusChange"
          active-text="开启数据加密"
          inactive-text="关闭数据加密"
        />
      </template>
    </el-result>

    <el-table :data="tableData">
      <el-table-column align="center" label="序号" type="index"></el-table-column>
      <el-table-column align="center" label="表名" prop="tableName"></el-table-column>
      <el-table-column align="center" label="表字段" prop="tableColumn"></el-table-column>
      <el-table-column align="center" label="主键字段" prop="idColumn"></el-table-column>
      <el-table-column align="center" label="操作">
        <template #header>
          <el-button v-if="!isSM4" type="primary" @click="openView">新增</el-button>
        </template>

        <template slot-scope="scope">
          <el-button v-if="!isSM4" type="primary" @click="update(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteById (scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 保存框   -->
    <div v-if="isOpen">
      <el-dialog :visible.sync="isOpen" append-to-body>
        <el-form inline :model="formInline" class="demo-form-inline">
          <!-- 选择表名 -->
          <el-form-item label="表名">
            <el-select v-model="formInline.tableName" filterable placeholder="请选择表名" @change="nameChange">
              <el-option v-for="(item,index) in tableNames" :key="index" :label="`[${item.TABLE_NAME}]${item.TABLE_COMMENT}`"  :value="item.TABLE_NAME"></el-option>
            </el-select>
          </el-form-item>

          <!-- 多选字段 -->
          <el-form-item label="字段(多选)">
            <el-select v-model="formInline.tableColumn" filterable multiple collapse-tags-tooltip collapse-tags clearable @change="columnChange">
              <el-option v-for="(item,index) in tableColumns" :key="index" :label="`[${item.COLUMN_NAME}]${item.COLUMN_COMMENT}`"  :value="item.COLUMN_NAME"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="主键字段">
            <el-select v-model="formInline.idColumn" filterable clearable @change="columnChange">
              <el-option v-for="(item,index) in tableColumns" :key="index" :label="`[${item.COLUMN_NAME}]${item.COLUMN_COMMENT}`"  :value="item.COLUMN_NAME"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="insert">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  deleteTable,
  insert,
  selectAll,
  updateTable,
  getTableColumns,
  getTableNames,
  SM4Encry
} from "@/api/demo/gzj/index";

import {getConfig, updateConfig} from "@/api/system/config";
export default {
  data() {
    return {
      tableData: [],
      isOpen: false,  // 是否打开弹窗
      isSM4: false,   // 是否SM4加密
      tableNames: [],
      tableColumns: [],
      dataType: 1, // 数据加密类型 1.仅加密 2.仅签名 3.加密签名

      formInline: {  // 选择的内容
        idColumn: "", // 主键字段
        tableName: "",
        tableColumn: ""
      }
    }
  },
  methods: {
    selectAll(){
      selectAll().then(res => {
        this.tableData = res.data;
      })
    },
    openView(){
      this.isOpen = !this.isOpen;
    },

    insert(){
      this.formInline.tableColumn = this.formInline.tableColumn.toString();
      insert(this.formInline).then(res => {
        this.$message.success(res.data);
        // 刷新数据
        this.selectAll();
        // 关闭弹窗
        this.openView();
      })
    },

    update(row){
      console.log(row.id)
      updateTable(row).then(res => {
        this.$message.success(res.data);
      })
    },
    deleteById(id){
      deleteTable(id).then(res => {
        this.$message.success(res.data);
        this.selectAll();
      })
    },
    nameChange(){
      this.$message.success(`选择表名${this.formInline.tableName}`)
      getTableColumns(this.formInline.tableName).then(res => {
        this.tableColumns = res.data;
      })

      // 清空之前选择列
      this.formInline.tableColumn = "";
      this.formInline.idColumn = "";
    },
    columnChange(){
      this.$message.success(`选择表名${this.formInline.tableColumn}`)
    },
    // 开启 或 关闭 数据加密
    SM4StatusChange(){
      const loading = this.$loading({
        lock: true,
        text: '正在同步数据',
        spinner: 'el-icon-loading',
        background: 'rgba(17,17,17,0.7)'
      });
      this.updateConfig(loading);
    },

    // 更改系统配置
    updateConfig(loading){
      getConfig("100").then(res => {
        let configData = res.data;
        configData.configValue = this.isSM4 ? this.dataType : "0";
        // 修改系统设置
        updateConfig(configData).then(res => {
          // 执行加解密操作
          SM4Encry(this.isSM4).then(res => {
            loading.close();
            this.$message.success("操作成功")
          })
        })
      })

    }
  },

  mounted() {
    this.selectAll();
    getTableNames().then(res => {
      this.tableNames = res.data;
    })

    getConfig("100").then(res => {
      this.isSM4 = res.data.configValue === "1" ? true : false;
    });

  }
}
</script>


<style scoped lang="scss">

</style>
